<template>
    <div class="app-container">
        <el-form label-position="right" :model="formLabelAlign" ref="ruleFormRef">
            <el-card style="margin-bottom: 20px;" class="box-card">
                <el-descriptions title="员工信息" :column="4" direction="vertical" border>
                    <el-descriptions-item label="员工类型">
                        <el-form-item prop="usertype" label="">
                            <el-select style="width: 100%;" v-model="formLabelAlign.taxPayer" placeholder="员工类型">
                                <el-option label="居民纳税人" :value="1" />
                                <el-option label="非居民纳税人" :value="2" />
                                <el-option label="实习生" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="姓名">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '姓名不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="name">
                            <el-input v-model="formLabelAlign.name" placeholder="姓名" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="工号">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '工号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobNumber">
                            <el-input v-model="formLabelAlign.jobNumber" placeholder="工号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        <el-form-item :rules="[
                            {
                                required: false,
                                pattern: /^[0-9]{11}$/,
                                message: '手机号为11位填数字',
                                trigger: 'blur',
                            },
                        ]" prop="mobile">
                            <el-input v-model="formLabelAlign.mobile" placeholder="手机号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="岗位">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '岗位不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="job">
                            <el-input v-model="formLabelAlign.job" placeholder="岗位" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="岗位属性">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '岗位属性不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="jobAttributes">
                            <el-input v-model="formLabelAlign.jobAttributes" placeholder="岗位属性" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="部门">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '部门不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="department">
                            <el-input v-model="formLabelAlign.department" placeholder="部门" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="职务">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '职务不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="position">
                            <el-input v-model="formLabelAlign.position" placeholder="职务" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="入职时间">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '入职时间不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="entryTime">
                            <el-date-picker style="width: 100%;" v-model="formLabelAlign.entryTime" type="date"
                                placeholder="选择入职时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item label="职级">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '职级不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="level">
                            <el-input v-model="formLabelAlign.level" placeholder="职级" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="是否离职">
                        <el-form-item prop="isLeave">
                            <el-select style="width: 100%;" v-model="formLabelAlign.isLeave" placeholder="是否离职">
                                <el-option label="未离职" :value="false" />
                                <el-option label="已离职" :value="true" />
                            </el-select>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item v-if="formLabelAlign.isLeave" label="离职时间">
                        <el-form-item prop="leaveTime">
                            <el-date-picker style="width: 100%;" v-model="formLabelAlign.leaveTime" type="date"
                                placeholder="选择离职时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="证件号">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '证件号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="idCard">
                            <el-input v-model="formLabelAlign.idCard" placeholder="证件号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="收款人姓名">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '收款人姓名不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="payee">
                            <el-input v-model="formLabelAlign.payee" placeholder="收款人姓名" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="银行卡号">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '银行卡号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="bankCard">
                            <el-input v-model="formLabelAlign.bankCard" placeholder="银行卡号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="开户行">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '开户行不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="bankName">
                            <el-input v-model="formLabelAlign.bankName" placeholder="开户行" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="公积金号">
                        <el-form-item :rules="[
                            {
                                required: false,
                                message: '公积金号不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="gjjh">
                            <el-input v-model="formLabelAlign.gjjh" placeholder="公积金号" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-form-item prop="remark">
                            <el-input autosize type="textarea" v-model.string="formLabelAlign.remark" placeholder="备注" />
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-card style="margin-bottom: 20px;" class="box-card">
                <el-descriptions title="薪资信息" :column="4" direction="vertical" border>
                    <el-descriptions-item label="基本薪资">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '基本薪资不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="basicSalary">
                            <el-input @input="basicSalaryFn" v-model="formLabelAlign.basicSalary" placeholder="基本薪资" />
                        </el-form-item>
                    </el-descriptions-item>
                    <el-descriptions-item label="减除费用">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: '减除费用不能为空',
                                trigger: 'blur',
                            },
                        ]" prop="deduction">
                            <el-input v-model="formLabelAlign.deduction" placeholder="减除费用" />
                        </el-form-item>
                    </el-descriptions-item>

                    <el-descriptions-item v-for="(item, index) of formLabelAlign.eductionList" :key="index"
                        :label="item.name">
                        <el-form-item :rules="[
                            {
                                required: true,
                                message: item.name + '不能为空',
                                trigger: 'blur',
                            },
                        ]" :prop="'eductionList.' + index + '.amount'">
                            <el-input v-model="item.amount" :placeholder="item.name" />
                        </el-form-item>
                    </el-descriptions-item>
                </el-descriptions>
            </el-card>
            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                <el-button @click="closeTag()">返回</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    name: "staffAdd"
}
</script>
<script setup>
import { poststaffInfo, postAdmindeduction, postAddstaff } from '@/api/api';
import useCloseTag from '@/hooks/useCloseTag'
import { parseTime, basicSalaryCom } from '@/utils';
import { ElMessage, ElMessageBox } from 'element-plus'
import { reactive, ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router';
const activeName = ref('first')
const ruleFormRef = ref()
const { closeTag } = useCloseTag()

const formLabelAlign = reactive({
    id: 0,
    password: "",
    jobNumber: "",
    name: "",
    mobile: "",
    jobAttributes: "",
    department: "",
    job: "",
    position: "",
    entryTime: "",
    leaveTime: "",
    level: "",
    isLeave: false,
    basicSalary: '',
    taxPayer: 1,
    deduction: '',
    idCard: "",
    payee: "",
    bankCard: "",
    bankName: "",
    gjjh: "",
    remark: "",
    eductionList: []
})

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            if (!formLabelAlign.id) delete formLabelAlign['id']
            if (!formLabelAlign.leaveTime) delete formLabelAlign['leaveTime']
            if (!formLabelAlign.remark) delete formLabelAlign['remark']
            let eductionList = []
            formLabelAlign.eductionList.map(item => {
                let arr = {
                    id: item.id || 0,
                    amount: item.amount,
                    name: item.name,
                    status: item.status
                }
                if (!formLabelAlign.id) delete arr['id']
                eductionList.push(arr)
            })
            await postAddstaff({
                ...formLabelAlign,
                eductionList
            })
            ElMessage.success('保存成功！')

        } else {
            console.info(fields)
            ElMessage.error('请查看您填写的参数是否正确！')

        }
    })

}

function basicSalaryFn(e) {
    formLabelAlign.eductionList.map(item => {
        item.amount = Number(basicSalaryCom(e, item.name).toFixed())
    })
}

if (useRoute().query.id) {
    formLabelAlign.id = useRoute().query.id
    listFn()
} else {
    postAdmindeductionFn()
}

async function postAdmindeductionFn() {
    let { data } = await postAdmindeduction({
        status: [1]
    })
    formLabelAlign.eductionList = data
}
async function listFn() {
    let { data: list } = await poststaffInfo({
        id: formLabelAlign.id,
    })
    list.eductionList = list.staffDeduction
    delete list.staffDeduction
    Object.assign(formLabelAlign, list)
}
</script>

<style></style>
